<template>
  <div id="earthquakeInfluenceMap-map" style="width:100%;height:658px;"></div>
  <div id="earthquakeInfluenceMap-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="earthquakeInfluenceMap-setDivPosition"  class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
      <!--<p @click="switchMap" class="init-setDivPosition-selected">
        <template v-if="switchMapBool==false">
          <img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br/><span>卫星图</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br/><span>街道图</span>
        </template>
      </p>-->
      <!-- 返回主界面 -->
      <p @click="zoomDefaultPosition" style="display:none;" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==true }">
        <img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br/><span>主界面</span>
      </p>
      <!-- 显示工具箱 -->
      <!--<p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
        <template v-if="showHideToolsBox">
          <img src="@/assets/map/image/tools.png" title="打开工具箱"><br/><span>工具箱</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/tools.png" title="关闭工具箱"><br/><span>工具箱</span>
        </template>
      </p>-->
      <!-- 基础数据图层 -->
      <p @click="showBaseDataLayerData" :class="{ 'init-setDivPosition-selected': showBaseDataLayerDataBool==true }">
        <template v-if="showBaseDataLayerDataBool==false">
          <img src="@/assets/map/image/fwdisplay.png" title="显示基础数据图层控件"><br/><span style="line-height: 14px;">基础数据图层</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/fwhide.png" title="隐藏基础数据图层控件"><br/><span style="line-height: 14px;">基础数据图层</span>
        </template>
      </p>
      <!-- 地震影响场图层 -->
      <p @click="showEllipseLayerData" :class="{ 'init-setDivPosition-selected': showEllipseLayerDataBool==true }">
        <template v-if="showEllipseLayerDataBool==false">
          <img src="@/assets/map/image/fwdisplay.png" title="显示地震影响场"><br/><span style="font-size: 12px;">地震影响场</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/fwhide.png" title="隐藏地震影响场"><br/><span style="font-size: 12px;">地震影响场</span>
        </template>
      </p>
      <!-- 抗震能力分布图层 -->
      <p @click="showSeismicCapacityDistributionLayerData" :class="{ 'init-setDivPosition-selected': showSeismicCapacityDistributionLayerDataBool==true }">
        <template v-if="showSeismicCapacityDistributionLayerDataBool==false">
          <img src="@/assets/map/image/fwdisplay.png" title="显示抗震能力分布图层"><br/><span style="font-size: 12px;line-height: 14px;">抗震能力分布图层</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/fwhide.png" title="隐藏抗震能力分布图层"><br/><span style="font-size: 12px;line-height: 14px;">抗震能力分布图层</span>
        </template>
      </p>
      <!-- 区县致死性差异性分布 -->
      <p @click="showCountyDeathDiffLayerData" :class="{ 'init-setDivPosition-selected': showCountyDeathDiffLayerDataBool==true }">
        <template v-if="showCountyDeathDiffLayerDataBool==false">
          <img src="@/assets/map/image/fwdisplay.png" title="显示区县致死性差异性分布"><br/><span style="font-size: 12px;line-height: 14px;">区县致死性差异性分布</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/fwhide.png" title="隐藏区县致死性差异性分布"><br/><span style="font-size: 12px;line-height: 14px;">区县致死性差异性分布</span>
        </template>
      </p>
      <!-- 评估结果 -->
      <p @click="showEvaluateResultSelectDiv" :class="{ 'init-setDivPosition-selected': showEvaluateResultSelectDivBool==true }">
        <template v-if="showEvaluateResultSelectDivBool==false">
          <img src="@/assets/map/image/fwdisplay.png" title="显示评估结果"><br/><span style="font-size: 12px;">评估结果</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/fwhide.png" title="隐藏评估结果"><br/><span style="font-size: 12px;">评估结果</span>
        </template>
      </p>
      <!-- 返回设定地震 -->
      <p @click="returnSetPage">
        <img src="@/assets/map/image/newImage/home.png" title="返回设定地震"><br/><span style="border:0;">返回</span>
      </p>
    </div>
    <!-- 工具箱 -->
    <div id="earthquakeInfluenceMap-ToolsBoxDiv" class="init-ToolsBoxDiv">
      <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
        <template v-if="showHideMeasureTool">
          <img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
        <template v-else>
          <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
      </p>
      <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
      </p>
    </div>
    <!-- 所有工具 -->
    <div id="earthquakeInfluenceMap-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="earthquakeInfluenceMap-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="earthquakeInfluenceMap-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="earthquakeInfluenceMap-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="earthquakeInfluenceMap-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <!--<div id="earthquakeInfluenceMap-popup" class="new-ol-popup">
      <a href="#" id="earthquakeInfluenceMap-popup-closer" class="new-ol-popup-closer"></a>
      <div id="earthquakeInfluenceMap-popup-content"></div>
    </div>-->
    <!--echart图表窗口-->
    <div id="earthquakeInfluenceMap-chart"></div>
  </div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
  getRESTLayer,getVectorTileLayer,iServerHttp } from "@/map/projMap.js";
import { getSqlTempLayer } from '@/map/sqlTempLayersSet.js';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import {Cluster, Vector as VectorSource, XYZ} from 'ol/source'
import {Control, defaults as defaultControls} from 'ol/control';
import Overlay from 'ol/Overlay';
import WKT from 'ol/format/WKT';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import {Fill, Stroke, Style, Icon, Circle as CircleStyle,Text} from 'ol/style';
import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
import {getArea, getLength} from 'ol/sphere';
import {unByKey} from 'ol/Observable';
import * as olExtent from 'ol/extent';
import {createBox} from 'ol/interaction/Draw';
import {boundingExtent} from 'ol/extent';
import { DatasetBufferAnalystParameters,FilterParameter,BufferSetting,BufferEndType,SpatialAnalystService } from '@supermap/iclient-ol';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
//用于绘制椭圆
import Circle from 'ol/geom/Circle';
import { fromCircle } from 'ol/geom/Polygon';
//地图turf功能
import { getLineLengthByCoords } from "@/map/taskmanage/sceneexamine/mapUtil.js";
//ol-echarts功能
//import EChartsLayer from 'ol-echarts';
//引入echarts
import * as echarts from 'echarts';
import { queryFeatureByLonLat } from '@/map/queryLayerFeature.js';

export default {
  name: "EarthquakeInfluenceMap",
  components: {

  },
  props:{
    allSettingData: {//设定地震图层数据
      type:Array,
      required:true,
      default: []
    },
    taskRegion: {//任务区域经纬度
      type:String,
      required:true,
      default:""
    },
    influenceEllipseList: {//地震影响场椭圆
      type:Array,
      required:true,
      default:[]
    },
    seismicCapacityDistributionListData: {//抗震能力分布图层查询结果数据列表
      type:Array,
      required:true,
      default:[]
    },
    capacityLegendData: {//抗震能力分布图层图例选择数据
      type:Array,
      required:true,
      default: []
    },
    countyDeathDiffListData: {//区县致死性差异性分布图层查询结果数据列表
      type:Array,
      required:true,
      default:[]
    },
    countyDeathDiffLegendData: {//区县致死性差异性分布图层图例选择数据
      type:Array,
      required:true,
      default: []
    },
    evaluateResultLayerSelectType: {//评估结果图层选择类型
      type:String,
      required:true,
      default:[]
    },
    evaluateResultListData: {//评估结果查询结果数据列表
      type:Array,
      required:true,
      default:[]
    },
    evaluateResultLegendData: {//评估结果图例选择数据
      type:Array,
      required:true,
      default: []
    },
    showLayerType: {//显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      type:String,
      required:true,
      default:""
    },
    countyLandslideListData: {//震后交通情况分布图图层数据
      type:Array,
      required:true,
      default: []
    },
    countyLandslideLegendData: {//震后交通情况分布图图层图例
      type:Array,
      required:true,
      default: []
    },
    countyLandslideBufferList: {//滑坡缓冲区图层数据
      type:Array,
      required:true,
      default: []
    },
  },
  emits:["mapLoading","returnSetPage","showInfluenceEvent",
    "showSeismicCapacityDistributionLayer","showCountyDeathDiff","showEvaluateResultSelect","showEvaluateResultEvent",
    "getMap","getSelectFeatureProperties","showBaseDataLayerControl","getClickCoordinate"],
  data() {
    return {
      str: "earthquakeInfluenceMap",
      map: null,
      projection4490:null,
      url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326",//中国地图
      center: [105, 34],
      zoom: 4,
      mapLoadingBool:false,//是否正在查询参数
      zoomDefaultPositionBool:true,//显示主界面
      switchMapBool:false,//切换地图
      layer1:null,//天地图街道图
      layer2:null,
      layer3:null,//天地图卫星图
      layer4:null,
      draw:null,//矢量绘制
      snap:null,
      select:null,
      modify:null,
      drag:null,
      source:null,//矢量绘制图层数据
      measureSource:null,//测量结果图层数据
      measure:null,//测量工具
      sketch:null,
      helpTooltipElement:null,
      helpTooltip:null,
      measureTooltipElement:null,
      measureTooltip:null,
      measureTooltipArray:[],//全部测量结果Overlay数组
      showHideMeasureTool:true,//显示|隐藏测量工具
      measureDistanceBool:true,
      measureAreaBool:true,
      stopMeasureBool:true,
      clearMeasureBool:true,
      showHidePositionTool:true,//显示|隐藏定位工具
      addPositionBool:true,
      clearPositionBool:true,
      popupInfoLayer:null,//弹出窗口
      showHideToolsBox:true,
      //addressMatchService:null,//地址匹配
      addressUrl:"https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
      selectFeature:null,//选中要素
      allDataList:[],//全部查询结果数组
      allSettingLayer:null,//设定地震图层
      taskVectorLayer:null,//任务列表区域图层
      taskRegionData: null,//任务区域经纬度数据
      ellipseLayer:null,//椭圆图层
      showEllipseLayerDataBool:false,//是否显示地震影响场图层
      showBaseDataLayerDataBool:false,//是否显示基础数据图层控件
      showSeismicCapacityDistributionLayerDataBool:false,//是否显示抗震能力分布图层
      seismicCapacityDistributionLayer:null,//抗震能力分布图层
      showCountyDeathDiffLayerDataBool:false,//是否显示区县致死性差异性分布图层
      countyDeathDiffLayer:null,//区县致死性差异性分布图层
      //评估结果
      showEvaluateResultSelectDivBool:false,//是否显示评估结果选择面板
      evaluateResultLayer:null,//评估结果显示图层
      chart:null,//echart图表对象
      chartOverLay:null,//设定地震序号对应的图表弹窗窗口
      allChartArray:[],//全部设定地震序号对应的图表对象
      allChartOverLayArray:[],//全部设定地震序号对应的图表弹窗窗口
      selectEvaluateResultObj:null,//选择的设定地震属性对象
      showLayerTypeData:"",//显示的图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      landslideBufferLayer:null,//滑坡缓冲区图层
      dzIntensity:null,//烈度
      roadRange:null,//对道路影响的范围(m)
    }
  },
  watch: {
    allSettingData: {//设定地震图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          this.allDataList = newVal;
          //设定地震图层显示
          this.showAllSettingLayerData();
        //}
      },
      immediate:true
    },
    taskRegion: {//任务区域经纬度
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal && newVal!=null && newVal!=""){
          this.taskRegionData = newVal;
          this.drawTaskPolygon();//绘制任务区域
        //}
      },
      immediate:true
    },
    influenceEllipseList: {//地震影响场椭圆列表
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          //地震影响场椭圆图层显示
          this.showInfluenceEllipse();
        //}
      },
      immediate:true
    },
    seismicCapacityDistributionListData: {//抗震能力分布图层查询结果数据列表
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          this.showSeismicCapacityDistributionListData();//显示抗震能力分布图层查询结果数据列表
        //}
      },
      immediate:true
    },
    capacityLegendData: {//抗震能力分布图层图例选择数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("抗震能力分布图层图例选择数据");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    countyDeathDiffListData: {//区县致死性差异性分布查询结果数据列表
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          this.showCountyDeathDiffListData();//显示区县致死性差异性分布查询结果数据列表图层
        //}
      },
      immediate:true
    },
    countyDeathDiffLegendData: {//区县致死性差异性分布图例选择数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("区县致死性差异性分布图例选择数据");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    evaluateResultLayerSelectType: {//评估结果图层选择类型
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("评估结果图层选择类型"+newVal);
          //清空评估结果图层
          this.clearEvaluateResultLayerSelectType(newVal);
          //清空选择的设定地震属性对象
          this.selectEvaluateResultObj = null;
        //}
      },
      immediate:true
    },
    evaluateResultListData: {//评估结果查询结果数据列表
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          //清空评估结果图层
          //this.clearEvaluateResultLayerSelectType(newVal);
          //显示评估结果查询结果数据列表图层
          this.showEvaluateResultListData();
        //}
      },
      immediate:true
    },
    evaluateResultLegendData: {//评估结果图例选择数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("评估结果图例选择数据");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    showLayerType: {//显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
          this.showLayerTypeData = newVal;
          //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
          this.showLayerTypeEvent();
        //}
      },
      immediate:true
    },
    countyLandslideListData: {//震后交通情况分布图图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          this.showCountyLandslideListData();
        //}
      },
      immediate:true
    },
    countyLandslideLegendData: {//震后交通情况分布图图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log(newVal);
        //}
      },
      immediate:true
    },
    countyLandslideBufferList: {//滑坡缓冲区图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          this.showCountyLandslideBufferList();
        //}
      },
      immediate:true
    },
  },
  created() {

  },
  mounted() {
    console.log("mounted");
    let that = this;
    //地图异步加载
    this.$nextTick(function(){
      console.log('地图异步加载');
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
        //绘制任务区域
        that.drawTaskPolygon();
        //设定地震图层显示
        that.showAllSettingLayerData();
        //显示评估结果查询结果数据列表图层
        that.showEvaluateResultListData();
        //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        // that.showLayerTypeEvent();
        //test
        //that.getXzqhDataByCode("130000");//根据code获取全省的行政区划点信息
        //震后交通情况分布图图层数据
        that.showCountyLandslideListData();
      }, 200);
    });
  },
  beforeCreate() {//生命周期创建之前
    console.log("beforeCreate");
  },
  beforeMount() {//生命周期挂载之前
    console.log("beforeMount");
  },
  beforeUpdate() {//生命周期更新之前
    console.log("beforeUpdate");
  },
  updated() {//生命周期更新之后
    console.log("updated");
  },
  beforeDestroy() {//生命周期销毁之前
    console.log("beforeDestroy");
  },
  destroyed() {//生命周期销毁完成
    this.map = null;
    console.log("销毁地图");
  },
  activated() {//如果页面有keep-alive缓存功能激活，这个函数会触发
    console.log("activated-"+this.str);
    //自动获取地图div高度
    this.autodivheight();
    //浏览器窗口发生变化时同时变化DIV高度
    window.onresize=this.autodivheight;
  },
  deactivated() {//如果页面有keep-alive缓存功能停用，这个函数会触发
    console.log("deactivated-"+this.str);
    //取消浏览器窗口发生变化时同时变化DIV高度事件
    window.onresize = null;
  },
  methods: {
    initMap() {
      debugger;
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr+"-map");
      if(targetMap.innerHTML!=""){
        console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //新建popup弹窗
      let targetDiv = document.getElementById(mapStr+"-mapDiv");
      let node = document.createElement("div");
      node.id = mapStr+"-popup";
      node.setAttribute("class","new-ol-popup");
      node.innerHTML = '<a href="#" id="'+mapStr+'-popup-closer" class="new-ol-popup-closer"></a>' +
          '<div id="'+mapStr+'-popup-content"></div>';
      targetDiv.appendChild(node);
      console.log("新建popup");
      //自动获取地图div高度
      this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      window.onresize=this.autodivheight;
      if(this.map){//避免重复加载地图
        console.log("避免重复加载地图");
        return;
      }
      console.log("初始化地图");
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
          // resolutions:getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
      this.map.addLayer(this.layer1);
      this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490',
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(1);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490',
      });
      this.map.addLayer(measureLayer);
      measureLayer.setZIndex(1);

      //任务区域图层
      this.taskVectorLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.taskVectorLayer);
      this.taskVectorLayer.setZIndex(1);

      //椭圆地震影响场图层
      this.ellipseLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.ellipseLayer);
      this.ellipseLayer.setZIndex(4);

      //设定地震图层
      this.allSettingLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.allSettingLayer);
      this.allSettingLayer.setZIndex(6);

      //抗震能力分布图层
      this.seismicCapacityDistributionLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.seismicCapacityDistributionLayer);
      this.seismicCapacityDistributionLayer.setZIndex(6);

      //区县致死性差异性分布图层
      this.countyDeathDiffLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.countyDeathDiffLayer);
      this.countyDeathDiffLayer.setZIndex(6);

      //评估结果显示图层
      /*this.evaluateResultLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });*/
      this.evaluateResultLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
        style: function(feature, resolution) {
          let temp = feature.getProperties();
          let text = "";
          if(temp.dataType!=undefined && temp.dataType=="震后交通情况分布图"){
            text = resolution <= 0.00004291534423828125 ? temp.name : '';//15级-18级显示文字标签
          }
          return new Style({
              fill:new Fill({//填充样式
                color:"rgba(0,0,0,0)"
              }),
              stroke:new Stroke({//线
                width:2,//宽
                color:"red"
              }),
              text: new Text({
                text: text,
                fill: new Fill({
                  color: 'black'
                }),
                stroke:new Stroke({//线
                  width:2,//宽
                  color:"white"
                }),
                offsetY:-5
              })
          });
        }
      });

      this.map.addLayer(this.evaluateResultLayer);
      this.evaluateResultLayer.setZIndex(7);

      //滑坡缓冲区图层
      this.landslideBufferLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490',
      });
      this.map.addLayer(this.landslideBufferLayer);
      this.landslideBufferLayer.setZIndex(6);

      //添加控件
      let info = new Control({element: document.getElementById(mapStr+'-mapDiv')});
      info.setMap(this.map);
      this.map.addControl(info);
      //弹出窗口
      let popupTarget = document.getElementById(this.str+"-popup");
      if(popupTarget){
        this.popupInfoLayer = new Overlay({
          element: popupTarget,
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
        //关闭弹出事件
        document.getElementById(this.str+"-popup-closer").onclick = function () {
          that.popupInfoLayer.setPosition(undefined);
          //隐藏弹出窗口
          document.getElementById(that.str+"-popup").style.display="none";
        };
      }
      //chart弹出窗口
      let chartTarget = document.getElementById(this.str+"-chart");
      if(chartTarget){
        this.chartOverLay = new Overlay({
          element: chartTarget,
          positioning: 'center-center',
          offset: [0, -55],
        });
        this.map.addOverlay(this.chartOverLay);
        //显示弹出窗口
        document.getElementById(this.str+"-chart").style.display="block";
        this.chartOverLay.setPosition(undefined);
      }
      //右键菜单事件
      this.map.on('contextmenu', function(event){
        event.preventDefault();//屏蔽自带的右键事件
        let pixel = that.map.getEventPixel(event.originalEvent);
        let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if(feature && that.draw==null){

        }
      });
      //点击地图事件
      this.map.on('click', function(event){
        //隐藏右键菜单
        that.hideContextMenu();
        //隐藏弹出窗口
        if(that.popupInfoLayer!=null){
          that.popupInfoLayer.setPosition(undefined);
        }
        let pixel = that.map.getEventPixel(event.originalEvent);
        let coordinate = that.map.getEventCoordinate(event.originalEvent);
        //判断定位工具是否开启状态
        if(that.showHidePositionTool==false){
          document.getElementById(mapStr+"-MousePositionLon").value = coordinate[0];
          document.getElementById(mapStr+"-MousePositionLat").value = coordinate[1];
        }
        //根据经纬度查询所有显示图层要素信息
        that.queryShowLayerFeatureByLonLat(coordinate);
        let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if(feature && that.draw==null){
          //选中要素
          that.selectFeature = feature;
          let temp = feature.getProperties();
          //console.log(temp);
          if(temp.dataType!=undefined && temp.dataType!=null) {//数据类型
            //数据类型
            let dataType = temp.dataType;
            //console.log(dataType);
            //地图选中对象属性传递
            that.$emit("getSelectFeatureProperties",temp);
            //地图选中经纬度传递
            that.$emit("getClickCoordinate",coordinate);
            if(dataType=="设定地震"){
              if(that.showEllipseLayerDataBool){//显示地震影响场
                that.$emit("showInfluenceEvent",temp);
              }else if(that.showEvaluateResultSelectDivBool){//显示评估结果
                that.selectEvaluateResultObj = temp;//选择的设定地震属性对象
                that.$emit("showEvaluateResultEvent",temp);
              }
            }else if(dataType=="任务区域"){

            }else if(dataType=="地震影响场"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }else if(dataType=="抗震能力分布图层"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }else if(dataType=="区县致死性差异性分布"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }else if(dataType=="地震滑坡网格" || dataType=="地震滑坡缓冲区"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }else if(dataType=="人员死亡分布图（修正前）" || dataType=="经济损失亡分布图（修正前）" || dataType=="需紧急安置人数分布图（修正前）"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }
          }
        }else if(feature==null && that.draw==null){

        }
      });
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if(center[0]!=that.center[0] || center[1]!=that.center[1] || zoom!=that.zoom){
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        }else{//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
        console.log("Resolutions");
        console.log(that.map.getView().getResolutions());
      });
      //鼠标移动事件--测量工具
      this.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        if(that.measure!=null){
          let helpMsg = '点击开始绘制';

          if (that.sketch) {
            const geom = that.sketch.getGeometry();
            if (geom instanceof Polygon) {
              helpMsg = '点击继续绘制多边形';
            } else if (geom instanceof LineString) {
              helpMsg = '点击继续绘制折线';
            }
          }

          that.helpTooltipElement.innerHTML = helpMsg;
          that.helpTooltip.setPosition(evt.coordinate);

          that.helpTooltipElement.classList.remove('hidden');
        }
      });
      //鼠标移出事件--测量工具
      this.map.getViewport().addEventListener('mouseout', function () {
        if(that.measure!=null){
          that.helpTooltipElement.classList.add('hidden');
        }
      });
      //地址匹配
      //this.addressMatchService = new AddressMatchService(this.addressUrl);
      //地图缩放到权限位置
      this.zoomDefaultPosition();

      //地图对象传递
      this.$emit("getMap",this.map);
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:658px
      let tempHeight = 864;
      let mapTempHeight = 658;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight < 525){
        mapHeight = 525;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
    setPopupContent(temp){//设置弹窗内容
      let html = "";
      if(temp.dataType=="地震影响场"){
        //烈度
        let intensityStr = this.getIntensityStr(temp.intensity);//获取烈度文本
        html += "烈度："+intensityStr+"<br/>";
        if(temp.longX!=null){
          let longX = this.numberAround(temp.longX,1);//四舍五入保留1位小数
          html += "长轴："+longX+"km"+"<br/>";
          let shortY = this.numberAround(temp.shortY,1);//四舍五入保留1位小数
          html += "短轴："+shortY+"km";
        }
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="抗震能力分布图层"){
        html += "综合抗震能力："+temp.value;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="区县致死性差异性分布"){
        html += "数值："+temp.finalValue;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="地震滑坡网格" || temp.dataType=="地震滑坡缓冲区"){
        html += "类型："+temp.dataType+"<br/>";
        html += "地震滑坡密度等级："+temp.value+"<br/>";
        let dzIntensityStr = this.getIntensityStr(this.dzIntensity);//获取烈度文本
        html += "烈度："+dzIntensityStr+"<br/>";
        html += "对道路影响的范围（m）："+this.roadRange;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="人员死亡分布图（修正前）") {
        html += "死亡人数（人）："+temp.value;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="经济损失亡分布图（修正前）") {
        let value = this.numberAround(temp.value,4);//保留4位小数
        html += "经济损失（万元）："+value;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }else if(temp.dataType=="需紧急安置人数分布图（修正前）") {
        html += "需紧急安置人数（人）："+temp.value;
        document.getElementById(this.str+'-popup-content').innerHTML = html;
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
      }
    },
    getIntensityStr(dzIntensity){//获取烈度文本
      let dzIntensityStr = "";
      if(dzIntensity!=null && dzIntensity!=undefined){
        if(dzIntensity==6){
          dzIntensityStr = "Ⅵ（6度）";
        }else if(dzIntensity==7){
          dzIntensityStr = "Ⅶ（7度）";
        }else if(dzIntensity==8){
          dzIntensityStr = "Ⅷ（8度）";
        }else if(dzIntensity==9){
          dzIntensityStr = "Ⅸ（9度）";
        }else if(dzIntensity==10){
          dzIntensityStr = "Ⅹ（10度）";
        }else if(dzIntensity==11){
          dzIntensityStr = "Ⅺ（11度）";
        }else{
          dzIntensityStr = dzIntensity;
        }
      }

      return dzIntensityStr;
    },
    getTextFormat(str){//格式化文本内容
      if(str==null || str==undefined){
        str = "";
      }
      return str;
    },
    hideContextMenu(){//隐藏右键菜单
      //隐藏右键菜单

    },
    //切换地图
    switchMap(){
      let that = this;
      if(this.switchMapBool){//显示街道图
        this.switchMapBool = false;
        //添加天地图图层
        if(this.layer1==null){
          this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
          this.map.addLayer(this.layer1);
        }
        if(this.layer2==null){
          this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
          this.map.addLayer(this.layer2);
        }
        //显示街道图
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      }else{//显示卫星图
        this.switchMapBool = true;
        if(this.layer3==null){
          this.layer3 = getTiandituImgMap();//fxpc天地图卫星影像底图
          this.map.addLayer(this.layer3);
        }
        if(this.layer4==null){
          this.layer4 = getTiandituImgText();//fxpc天地图卫星影像注记
          this.map.addLayer(this.layer4);
        }
        //显示卫星图
        this.layer1.setVisible(false);
        this.layer2.setVisible(false);
        this.layer3.setVisible(true);
        this.layer4.setVisible(true);
        this.layer3.setZIndex(0);
        this.layer4.setZIndex(0);
      }
    },
    //地图缩放到权限位置
    zoomDefaultPosition() {
      //刷新地图,确保地图不变形
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    mapLoading(msg){//地图查询Loading
      if(this.mapLoadingBool){
        this.$emit("mapLoading",msg);
      }
    },
    //显示工具箱
    showHideToolsBoxDiv(){
      if(this.showHideToolsBox){
        this.showHideToolsBox = false;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display="block";
      }else{
        this.showHideToolsBox = true;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display="none";
      }
      //关闭全部工具
      this.closeAllToolsBox(null);
    },
    //关闭全部工具
    closeAllToolsBox(type){
      //关闭测量工具
      if(type!="MeasureTool" && this.showHideMeasureTool==false){
        this.showHideMeasureTool = true;
        let divId = this.str+"-MeasureToolsDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空测量结果
        this.clearMeasure();
        this.clearMeasureBool = true;
      }
      //关闭定位工具
      if(type!="PositionTool" && this.showHidePositionTool==false){
        this.showHidePositionTool = true;
        let divId = this.str+"-MousePositionDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空定位结果
        this.clearPosition();
      }
    },
    //地图工具--测试地图打印功能
    toolsBoxPrintTest(){
      let that = this;
      //测试地图导出方法一
      /*this.map.once('rendercomplete', function () {
        const mapCanvas = document.createElement('canvas');
        const size = that.map.getSize();
        mapCanvas.width = size[0];
        mapCanvas.height = size[1];
        const mapContext = mapCanvas.getContext('2d');
        Array.prototype.forEach.call(
            //document.querySelectorAll('.ol-layer canvas'),
            document.querySelectorAll('#earthquakeInfluenceMap-map .ol-viewport .ol-layer canvas'),
            function (canvas) {
              if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                // Get the transform parameters from the style's transform matrix
                const matrix = transform
                    .match(/^matrix\(([^\(]*)\)$/)[1]
                    .split(',')
                    .map(Number);
                // Apply the transform to the export map context
                CanvasRenderingContext2D.prototype.setTransform.apply(
                    mapContext,
                    matrix
                );
                mapContext.drawImage(canvas, 0, 0);
              }
            }
        );
        if (navigator.msSaveBlob) {
          // link download attribute does not work on MS browsers
          navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
        } else {
          const link = document.getElementById('image-download');
          link.crossOrigin = 'anonymous';
          link.href = mapCanvas.toDataURL();
          link.click();
        }
      });
      this.map.renderSync();*/


      //测试地图导出方法二
      /*let exportPNGElement = document.getElementById('export-png'); //导出图片功能项
      let manypng = document.getElementById('manypng'); //导出图片功能项
      if ('download' in exportPNGElement) {
        exportPNGElement.addEventListener('click', function (e) {
          that.map.once('postcompose', function (event) {debugger
            let canvas = event.context.canvas; //地图渲染容器
            exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
          });
          that.map.renderSync();
        }, false);
      } else {
        alert("浏览器不支持此导出地图图片功能！");
      }

      if ('download' in manypng) {
        manypng.addEventListener('click', function(e) {
          //  that.map.removeInteraction(draw);
          addInteraction();
          that.map.renderSync();
        },false);
      }

      let draw; // global so we can remove it later
      let source = new VectorSource();
      function addInteraction() {
        draw = new Draw({
          source: source,
          type: 'LineString',
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 2
            }),
            image: new CircleStyle({
              radius: 7,
              fill: new Fill({
                color: '#ffcc33'
              })
            })
          }),
          maxPoints: 2,
          geometryFunction: createBox()//矩形框
        })

        that.map.addInteraction(draw);

        // that.map.values_.target='map2';

        function getXDis(e, number) {
          let min = undefined;
          let max = undefined;
          e.forEach(element => {
            if (min == undefined || element[number] < min) {
              min = element[number];
            }

            if (max == undefined || element[number] > max) {
              max = element[number];
            }
          });
          return [min+2, max - min-4];
        }

        let extent = [];
        draw.on('drawend',function(evt){
          let feature = evt.feature;console.log(feature);
          let ftarget = evt.target.a;
          let geometry=feature.getGeometry();
          let ext=geometry.getExtent();
          that.map.removeInteraction(draw);

          let r = that.map.getView().getResolutionForExtent(ext, that.map.getSize());//根据范围获取分辨率
          that.map.getView().setResolution(r);
          that.map.getView().setZoom(12);
          let centerone=olExtent.getCenter(ext);
          that.map.getView().setCenter(centerone);

          let canvas;
          let imageData;
          let canvas2;
          let coordinate=geometry.getCoordinates();
          that.map.once("postrender", function (e) {
            extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
            extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
            extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
            extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);

            let x_dx = getXDis(extent, 0);
            let y_dy = getXDis(extent, 1);

            that.map.once("postcompose", function(event) {
              canvas = event.context.canvas;
              let ctx2=canvas.getContext("2d");
              imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]);
              let c=document.getElementById("earthquakeInfluenceMap-map");
              c.style.width=imageData.width+'px';
              c.style.height=imageData.height+'px';
              that.map.updateSize();//容器改变重新加载地图
            });
            that.map.once('rendercomplete',function(){//渲染完成
              canvas.toBlob(function (blob) {
                saveAs(blob, 'map.png');debugger
                $('#earthquakeInfluenceMap-map').css({
                  width:"100%",
                  height:"100%"
                });
                that.map.updateSize();//容器改变重新加载地图
              });
            });
          });
        });
      }*/
    },
    measureToolBox(){//测量工具Div
      let divId = this.str+"-MeasureToolsDiv";
      //关闭全部工具
      this.closeAllToolsBox("MeasureTool");
      if(this.showHideMeasureTool){
        this.showHideMeasureTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHideMeasureTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    measureDistance(){//测距
      if(this.source!=null){
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea(){//测面
      if(this.source!=null){
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure(){//停止测量
      if(this.source!=null){
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure(){//清空测量结果
      if(this.source!=null){
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    positionToolBox(){//定位工具Div
      let divId = this.str+"-MousePositionDiv";
      //关闭全部工具
      this.closeAllToolsBox("PositionTool");
      if(this.showHidePositionTool){
        this.showHidePositionTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHidePositionTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    addPosition(){//添加定位结果
      this.clearPositionBool = true;
      this.addPositionBool = false;
      //添加定位结果
      if(this.source!=null){
        let longitude = document.getElementById(this.str+"-MousePositionLon").value;
        let latitude = document.getElementById(this.str+"-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude,latitude);
        if(lonlat!=null){
          //点
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          //样式
          let style = this.getPointStyle();
          featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({
            type:"position",
            longitude:longitude,
            latitude:latitude,
          });
          //添加定位点
          this.source.addFeature(featureTmp);
          //居中缩放
          this.map.getView().setCenter(lonlat);
          this.map.getView().setZoom(12);
        }
      }
    },
    clearPosition(){//清空定位结果
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    //地图工具箱
    setMapToolBox(value){
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      }else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value,false);
      }else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value,true);
      }else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      }else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      }else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      }else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      }else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      }else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      }else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      }else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      }else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction(){
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction(){
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        that.modify = new Modify({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type,bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if(bool){//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        }else{//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
        }
      }

      //计算面积
      function getPolygonArea (polygon) {
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        //const area = getArea(polygon, {projection: 'EPSG:4326'});
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        //const length = getLength(line, {projection: 'EPSG:4326'});
        const length = getLength(line, {projection: 'EPSG:4490'});
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        /*let length = getLineLengthByCoords(line.getCoordinates());
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }*/

        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        //const area = getArea(polygon, {projection: 'EPSG:4326'});
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement!=null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement!=null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }

      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new CircleStyle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if(that.helpTooltip!=null){
            that.map.removeOverlay(that.helpTooltip);
          }
          if(that.measureTooltip!=null){
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }

      //清空测量结果
      function clearMeasureResult(){
        if(that.measureSource!=null){
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if(that.measureTooltipArray.length>0){
            for(let i=0;i<that.measureTooltipArray.length;i++){
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    getPolyonStyle(color,backgroundColor,strokeWidth){//多边形样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:strokeWidth,//宽
          color:color
        })
      });

      return style;
    },
    getPolyonFillStyle(fillColor){//多边形样式--不带边框
      if(fillColor==null){
        fillColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:fillColor
        }),
        /*stroke:new Stroke({//描绘
          width:0.1,//宽
          color:fillColor
        })*/
      });

      return style;
    },
    getPolyonTextStyle(color,backgroundColor,text){//多边形文字样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:1,//宽
          color:color
        }),
        text: new Text({
          text: text,
          fill: new Fill({
            color: 'black'
          }),
          offsetY:20,
          font:'bold 14px 微软雅黑',
        })
      });

      return style;
    },
    getPointStyle(){//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          /*anchor: [0.5, 1]*/
          anchor: [0.5, 0.8]
        }),
      });

      return style;
    },
    getPointStyleByColor(fillColor,text,bool){//圆点样式
      let style = null;
      //显示文字
      if(bool){
        style = new Style({
          image: new CircleStyle({
            radius: 5,
            fill: new Fill({
              color: fillColor,
            }),
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-10
          })
        });
      }else{
        style = new Style({
          image: new CircleStyle({
            radius: 5,
            fill: new Fill({
              color: fillColor,
            }),
          })
        });
      }

      return style;
    },
    getPointTextStyle(radius,color,str,type){//点图标文字样式
      //设定地震序号点
      let style = null;
      if(type=="设定地震"){
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            stroke: new Stroke({
              color: "black",
              width: 1
            }),
            fill: new Fill({
              color: "red"
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="省"){
        style = new Style({
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'red'
            })
          })
        });
      }else if(type=="市"){
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            stroke: new Stroke({
              color: "black",
              width: 1
            }),
            fill: new Fill({
              color: "red"
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="区县"){
        style = new Style({
          image: new CircleStyle({
            radius: 2,
            stroke: new Stroke({
              color: "black",
              width: 1
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="乡镇"){
        style = new Style({
          image: new CircleStyle({
            radius: 2,
            stroke: new Stroke({
              color: "black",
              width: 1
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }

      return style;
    },
    getLineStringStyle(color,text,bool){//线样式
      let style = null;
      //显示文字
      if(bool){
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-5
          })
        });
      }else{
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          })
        });
      }

      return style;
    },
    //处理经纬度
    getLonLat(longitude,latitude){
      let lonlat = null;
      if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
        let lon = Number(longitude);
        let lat = Number(latitude);
        if(lon>0 && lon<180 && lat>0 && lat<90){
          lonlat = [lon,lat];
        }
      }

      return lonlat;
    },
    //缩放到区域位置
    showBoundingExtent(coordinates){
      console.log("缩放到区域位置");
      if (this.map!=null && coordinates!=null && coordinates.length > 1) {
        //console.log(coordinates);
        let extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        //获取默认位置
        //this.center = this.map.getView().getCenter();
        //this.zoom = this.map.getView().getZoom();
      }
    },
    //四舍五入保留len位小数
    numberAround(number,len){
      number = Number(number);
      return number.toFixed(len);
    },
    //设定地震图层显示
    showAllSettingLayerData(){
      //是否已存在图表弹出窗口数组
      if(this.allChartOverLayArray.length>0){
        for(let i=0;i<this.allChartOverLayArray.length;i++){
          if(this.allChartOverLayArray[i]){
            //移除图层
            this.map.removeOverlay(this.allChartOverLayArray[i]);
          }
        }
      }
      if(this.allSettingLayer!=null && this.allDataList!=null && this.allDataList.length>0){
        let list = this.allDataList;
        //清空图层
        this.allSettingLayer.getSource().clear();
        console.log("设定地震图层显示全部经纬度");
        console.log(list);
        for(let i=0;i<list.length;i++){
          if(list[i]==null){
            continue;
          }
          //经纬度
          let longitude = list[i].longitude;
          let latitude = list[i].latitude;
          //处理经纬度
          let lonlat = this.getLonLat(longitude,latitude);
          if(lonlat!=null){
            let faultNum = list[i].sort;//序号
            //点
            let featureTmp = new Feature({
              geometry: new Point(lonlat)
            });
            //样式
            let style = this.getPointTextStyle(10,"red",faultNum,"设定地震");//点图标文字样式
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({dataType:"设定地震",lon:longitude,lat:latitude,num:faultNum});
            //添加设定地震
            this.allSettingLayer.getSource().addFeature(featureTmp);
          }
        }
        //清空图表弹出窗口数组
        this.allChartOverLayArray = [];
        //重新建立图表弹出窗口数组
        if(list!=null && list.length>0){
          for(let i=0;i<list.length;i++){
            this.allChartOverLayArray.push(null);
            //chart弹出窗口
            this.allChartOverLayArray[i] = new Overlay({
              element: document.createElement('div'),
              positioning: 'center-center',
              offset: [-35, -30],
            });
            this.map.addOverlay(this.allChartOverLayArray[i]);
            this.allChartOverLayArray[i].setPosition(undefined);
          }
        }
      }else{
        if(this.allSettingLayer!=null){
          //清空图层
          this.allSettingLayer.getSource().clear();
        }
      }
    },
    drawTaskPolygon(){//绘制任务区域
      let taskRegion = this.taskRegionData;
      if(taskRegion!=null && taskRegion!="" && this.taskVectorLayer!=null){
        this.taskVectorLayer.getSource().clear();//清空区域
        if(taskRegion.indexOf("MULTIPOLYGON")==-1) {//地图绘制区域
          console.log("地图绘制区域");
          let coordinates = [];
          let arr = taskRegion.split(";");
          if(arr!=null && arr.length>0){
            for(let j=0;j<arr.length;j++){
              let lonlatStr = arr[j].split(",");
              let lonlat = [];
              lonlat.push(Number(lonlatStr[0]));
              lonlat.push(Number(lonlatStr[1]));
              coordinates.push(lonlat);
            }
          }
          //console.log(coordinates);
          //多边形
          let featureTmp = new Feature({
            geometry: new Polygon([coordinates])
          });
          //设置属性
          featureTmp.setProperties({id: null,dataType:"任务区域"});
          //样式
          let style = this.getPolyonStyle("orange",null,2);
          featureTmp.setStyle(style);
          //添加任务区域
          this.taskVectorLayer.getSource().addFeature(featureTmp);
          //缩放到区域位置
          this.showBoundingExtent(coordinates);
        }else{//行政区划选择区域
          console.log("行政区划选择区域");
          let allCoordinates = [];
          let all_coords_str = taskRegion.split(";");
          for(let i=0;i<all_coords_str.length;i++){
            //空间数据
            let featureTmp = new WKT().readFeature(all_coords_str[i]);
            //设置属性
            featureTmp.setProperties({id: null,dataType:"任务区域"});
            //样式
            let style = this.getPolyonStyle("orange",null,2);
            featureTmp.setStyle(style);
            //添加任务区域
            this.taskVectorLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }
    },
    judgeLonLatInPolygon(lonlat){//判断经纬度是否在面内
      let bool = false;
      let features = this.taskVectorLayer.getSource().getFeatures();
      if(features!=null && features.length>0){
        for(let i=0;i<features.length;i++){
          let feature = features[i];
          let polygon = feature.getGeometry();
          bool = polygon.intersectsCoordinate(lonlat);
          if(bool){
            break;
          }
        }
      }
      return bool;
    },
    getXzqhDataByCode(code){//根据code获取全省的行政区划点信息
      if(code!=null){
        code = "156"+code;//行政区划code
        console.log(code);
        let that = this;
        //按code查询行政区划
        let url = 'https://api.tianditu.gov.cn/administrative?postStr={"searchWord":"'+code+'","searchType":"0","needSubInfo":"false","needAll":"true","needPolygon":"false","needPre":"false"}&tk=ad0a520abd480f45a173115c2a80f723';
        //行政区划查询
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
          console.log(httpRequest);
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            let json = httpRequest.responseText;//获取到json字符串，还需解析
            let obj = JSON.parse(json);
            console.log("行政区划查询");
            console.log(obj);
            let returncode = obj.returncode;
            if(returncode=="100"){//正常查询
              console.log(obj.data);
              //省
              let provinceData = obj.data;
              let longitude = provinceData.lnt;
              let latitude = provinceData.lat;
              let name = provinceData.name;
              //处理经纬度
              let lonlat = that.getLonLat(longitude,latitude);
              if(lonlat!=null){
                that.addXzqhPointText(lonlat,name,"省");//添加行政区划省市县点文字图标
                let child = obj.data.child;
                console.log("child");
                console.log(child);
                if(child.length>0){
                  for(let i=0;i<child.length;i++){
                    let cityData = child[i];//市
                    let citylon = cityData.lnt;
                    let citylat = cityData.lat;
                    let cityName = cityData.name;
                    //处理经纬度
                    let citylonlat = that.getLonLat(citylon,citylat);
                    if(citylonlat!=null){
                      that.addXzqhPointText(citylonlat,cityName,"市");//添加行政区划省市县点文字图标
                      let citychild = cityData.child;
                      console.log("citychild");
                      console.log(citychild);
                      if(citychild.length>0) {
                        for (let j = 0; j < citychild.length; j++) {
                          let countyData = citychild[j];//区县
                          let countylon = countyData.lnt;
                          let countylat = countyData.lat;
                          let countyName = countyData.name;
                          //处理经纬度
                          let countylonlat = that.getLonLat(countylon,countylat);
                          if(countylonlat!=null){
                            that.addXzqhPointText(countylonlat,countyName,"县");//添加行政区划省市县点文字图标
                          }
                        }
                      }
                    }
                  }
                }
              }
            }else{
            }

          }
        };
      }
    },
    addXzqhPointText(lonlat,str,type){//添加行政区划省市县点文字图标
      if(lonlat!=null){
        //点
        let featureTmp = new Feature({
          geometry: new Point(lonlat)
        });
        //样式
        let style = this.getPointTextStyle(5,"red", str, type);//点图标文字样式
        featureTmp.setStyle(style);
        this.taskVectorLayer.getSource().addFeature(featureTmp);
      }
    },
    //返回设定地震页面
    returnSetPage(){
      this.$emit("returnSetPage",true);
    },
    //地震影响场椭圆图层显示按钮
    showEllipseLayerData(){
      if(this.showEllipseLayerDataBool){
        //this.showEllipseLayerDataBool = false;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "";
      }else{
        //this.showEllipseLayerDataBool = true;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "地震影响场";
      }
      //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      this.showLayerTypeEvent();
    },
    //地震影响场椭圆图层显示
    showInfluenceEllipse(){
      if(this.showEllipseLayerDataBool && this.ellipseLayer!=null) {
        this.ellipseLayer.getSource().clear();//清空地震影响场
        let list = this.influenceEllipseList;
        if(list!=null && list.length>0) {
          let allCoordinates = [];//全部经纬度
          //颜色
          let color = "red";
          let colorArray = ["rgba(255,190,190,0.7)",
            "rgba(255,127,127,0.7)",
            "rgba(200,40,40,0.7)",
            "rgba(168,0,0,0.7)",
            "rgba(140,0,0,0.7)"];
          for(let i=0;i<list.length;i++){
            let data = list[i];
            if(data!=null && data!="" && data[3]!=null && data[3]!=""){
              let intensity = data[0];//烈度
              let longX = data[1];//长轴
              let shortY = data[2];//短轴
              let tempIndex = intensity-6;
              if(tempIndex>=0 && tempIndex<colorArray.length){
                color = colorArray[tempIndex];
              }
              //烈度文字
              let intensityStr = "";
              if(intensity==6){
                intensityStr = "Ⅵ（6度）";
              }else if(intensity==7){
                intensityStr = "Ⅶ（7度）";
              }else if(intensity==8){
                intensityStr = "Ⅷ（8度）";
              }else if(intensity==9){
                intensityStr = "Ⅸ（9度）";
              }else if(intensity==10){
                intensityStr = "Ⅹ（10度）";
              }
              //空间数据
              let featureTmp = new WKT().readFeature(data[3]);
              //设置属性
              featureTmp.setProperties({id: null, dataType: "地震影响场",intensity:intensity,longX:longX,shortY:shortY});
              //样式
              let style = this.getPolyonTextStyle("rgb(152,152,152)", color, intensityStr);
              featureTmp.setStyle(style);
              //添加地震影响场椭圆
              this.ellipseLayer.getSource().addFeature(featureTmp);
              //获取范围
              let extent = featureTmp.getGeometry().getExtent();
              if(extent.length==4){
                //全部经纬度--左下角
                allCoordinates.push([extent[0],extent[1]]);
                //全部经纬度--右上角
                allCoordinates.push([extent[2],extent[3]]);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.ellipseLayer!=null) {
          this.ellipseLayer.getSource().clear();//清空地震影响场
        }
      }
    },
    //基础数据图层控件
    showBaseDataLayerData:function(){
      if(this.showBaseDataLayerDataBool){
        this.showBaseDataLayerDataBool = false;
        //隐藏基础数据图层控件
        this.$emit("showBaseDataLayerControl",false);
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        //this.showLayerTypeData = "";
      }else{
        this.showBaseDataLayerDataBool = true;
        //显示基础数据图层控件
        this.$emit("showBaseDataLayerControl",true);
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        //this.showLayerTypeData = "基础数据图层";
      }
    },
    //抗震能力分布图层显示按钮
    showSeismicCapacityDistributionLayerData(){
      if(this.showSeismicCapacityDistributionLayerDataBool){
        //this.showSeismicCapacityDistributionLayerDataBool = false;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "";
      }else{
        //this.showSeismicCapacityDistributionLayerDataBool = true;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "抗震能力分布图层";
      }
      //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      this.showLayerTypeEvent();
    },
    //区县致死性差异性分布图层显示按钮
    showCountyDeathDiffLayerData(){
      if(this.showCountyDeathDiffLayerDataBool){
        //this.showCountyDeathDiffLayerDataBool = false;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "";
      }else{
        //this.showCountyDeathDiffLayerDataBool = true;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "区县致死性差异性分布";
      }
      //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      this.showLayerTypeEvent();
    },
    //是否显示评估结果选择面板
    showEvaluateResultSelectDiv(){
      if(this.showEvaluateResultSelectDivBool){
        //this.showEvaluateResultSelectDivBool = false;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "";
      }else{
        //this.showEvaluateResultSelectDivBool = true;
        //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
        this.showLayerTypeData = "评估结果";
      }
      //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      this.showLayerTypeEvent();
    },
    //清空评估结果图层选择类型
    clearEvaluateResultLayerSelectType(type){
      //移除echarts
      this.removeEcharts(null);
      //隐藏echarts
      this.allChartArray = [];
      //隐藏指定序号的评估结果图表弹出框
      if(this.chartOverLay){
        //设置位置undefined可达到隐藏清除弹出框
        this.chartOverLay.setPosition(undefined);
      }
      //隐藏全部的评估结果图表弹出框
      if(this.allChartOverLayArray.length>0){
        for(let i=0;i<this.allChartOverLayArray.length;i++){
          if(this.allChartOverLayArray[i]){
            this.allChartOverLayArray[i].setPosition(undefined);
          }
        }
      }
    },
    //显示评估结果查询结果数据列表图层
    showEvaluateResultListData(){
      if(this.evaluateResultLayerSelectType!="" && this.evaluateResultListData!=null){
        let selectType = this.evaluateResultLayerSelectType;//评估结果选择类型
        if(selectType=="人员死亡分布图（修正前）"){
          //显示人员死亡分布图（修正前）
          this.showEvalateDeathDistributionData();
        }else if(selectType=="经济损失分布图（修正前）"){
          //显示经济损失亡分布图（修正前）
          this.showEvalateEconomyDistributionData();
        }else if(selectType=="需紧急安置人数分布图（修正前）"){
          //显示需紧急安置人数分布图（修正前）
          this.showEvalateEmergencyDistributionData();
        }else{
          if(this.evaluateResultLayer!=null) {
            this.evaluateResultLayer.getSource().clear();//清空评估结果查询结果数据列表图层
            let resultArray = this.evaluateResultListData;
            console.log("显示评估结果查询结果数据列表图层");
            console.log(resultArray);
            let number = null;//选定设定地震属性对象序号
            //是否有选定的设定地震属性对象
            if(this.selectEvaluateResultObj!=null){
              number = this.selectEvaluateResultObj.num;//选定设定地震序号
              //获取经纬度
              let lon = this.selectEvaluateResultObj.lon;
              let lat = this.selectEvaluateResultObj.lat;
              //获取经纬度
              let lonlat = this.getLonLat(lon,lat);
              this.chartOverLay.setPosition(lonlat);
            }
            //隐藏全部的评估结果图表弹出框
            if(this.allChartOverLayArray.length>0){
              for(let i=0;i<this.allChartOverLayArray.length;i++){
                if(this.allChartOverLayArray[i]){
                  this.allChartOverLayArray[i].setPosition(undefined);
                }
              }
            }
            if(resultArray!=null && resultArray.length>0){
              for(let i=0;i<resultArray.length;i++){
                if(number==null){//显示全部图表
                  let sort = i+1;//序号
                  if(selectType=="人员伤亡"){
                    let legendArray = ["死亡人数","受伤人数"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，4个柱体；选择角度，2个柱体
                    this.addEcharts (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="经济损失"){
                    let legendArray = ["经济损失（亿元）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //保留2位小数
                    dataArray = this.getDataArrayNumberAround(dataArray,2);
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需紧急安置人数"){
                    let legendArray = ["需紧急安置人数"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需救援队伍"){
                    let legendArray = ["需救援队伍（人）","专业救援力量（人）","民间救援力量（人）","社会其他救援力量（人）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(4类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts4 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需医务人员"){
                    let legendArray = ["需医务人员（人）","医生（人）","护士（人）","心理医生（人）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(4类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts4 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需帐篷数"){//需救援物资
                    let legendArray = ["需帐篷数（顶）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需担架"){//需救援物资
                    let legendArray = ["需担架（付）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需棉被"){//需救援物资
                    let legendArray = ["需棉被（床）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需食品"){//需救援物资
                    let legendArray = ["需食品（吨）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需饮水"){//需救援物资
                    let legendArray = ["需饮水（吨）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需临时厕所"){//需救援物资
                    let legendArray = ["需临时厕所（个）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需临时浴室"){//需救援物资
                    let legendArray = ["需临时浴室（个）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,i,sort);

                  }else if(selectType=="需医疗物资"){
                    let legendArray = ["需医疗物资","需病房（平方米）","需病床（张）","需血浆（升）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(3类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts3 (selectType,legendArray,dataArray,i,sort);
                  }
                }else{//显示选定的序号的图表
                  let sort = number;//序号
                  if(selectType=="人员伤亡"){
                    let legendArray = ["死亡人数","受伤人数"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，4个柱体；选择角度，2个柱体
                    this.addEcharts (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="经济损失"){
                    let legendArray = ["经济损失（亿元）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //保留2位小数
                    dataArray = this.getDataArrayNumberAround(dataArray,2);
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需紧急安置人数"){
                    let legendArray = ["需紧急安置人数"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需救援队伍"){
                    let legendArray = ["需救援队伍（人）","专业救援力量（人）","民间救援力量（人）","社会其他救援力量（人）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(4类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts4 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需医务人员"){
                    let legendArray = ["需医务人员（人）","医生（人）","护士（人）","心理医生（人）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(4类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts4 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需帐篷数"){//需救援物资
                    let legendArray = ["需帐篷数"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需担架"){//需救援物资
                    let legendArray = ["需担架"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需棉被"){//需救援物资
                    let legendArray = ["需棉被"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需食品"){//需救援物资
                    let legendArray = ["需食品"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需饮水"){//需救援物资
                    let legendArray = ["需饮水"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需临时厕所"){//需救援物资
                    let legendArray = ["需临时厕所"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需临时浴室"){//需救援物资
                    let legendArray = ["需临时浴室"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts2 (selectType,legendArray,dataArray,null,sort);

                  }else if(selectType=="需医疗物资"){
                    let legendArray = ["需医疗物资","需病房（平方米）","需病床（张）","需血浆（升）"];//类目名称
                    let dataArray = resultArray[i];//数据值
                    //添加echarts柱状图堆叠图(3类)--未选择角度，2个柱体；选择角度，1个柱体
                    this.addEcharts3 (selectType,legendArray,dataArray,null,sort);
                  }
                }
              }
            }
          }
        }
      }
    },
    //保留小数
    getDataArrayNumberAround(dataArray,len){
      if(dataArray!=null){
        for(let i=0;i<dataArray.length;i++){
          dataArray[i] = this.numberAround(dataArray[i],len);//保留len位小数
        }
      }

      return dataArray;
    },
    //添加echarts柱状图--未选择角度，4个柱体；选择角度，2个柱体
    addEcharts (selectType,legendArray,dataArray,index,sort) {
      //移除echarts
      this.removeEcharts(index);
      if(legendArray!=null && legendArray.length==2
          && dataArray!=null && (dataArray.length==4 || dataArray.length==2)){
        //颜色样式
        let colorArray = ["red","blue"];
        let markerStr1 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[0]+";\"></span>";
        let markerStr2 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[1]+";\"></span>";

        let xDataArray = [];
        let data1 = [];
        let data2 = [];
        if(dataArray.length==4){
          if(dataArray[0]==dataArray[1] && dataArray[2]==dataArray[3]){//最小值和最大值数值相同
            xDataArray = ['数值'];
            data1 = [dataArray[0]];
            data2 = [dataArray[2]];
          }else{
            xDataArray = ["最小值","最大值"];
            data1 = [dataArray[0],dataArray[1]];
            data2 = [dataArray[2],dataArray[3]];
          }
        }else if(dataArray.length==2){
          xDataArray = ['数值'];
          data1 = [dataArray[0]];
          data2 = [dataArray[1]];
        }
        if(xDataArray.length>0){
          let option = {
            legend: {
              show: false,//是否显示图例
              //data: ["死亡人数", "受伤人数"],
              data:legendArray,
              align: 'left'
            },
            gird: {
              show:true,
              left: 0,
              right: 0,
              bottom: 0,
              top: 0,
              containLabel: false
            },
            //backgroundColor: '#fff',
            tooltip: {
              formatter(params){
                if(params.name=="最小值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[1]+"：" + data2[0];
                }else if(params.name=="最大值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + data1[1] + "<br/>"
                      +markerStr2+legendArray[1]+"：" + data2[1];
                }else if(params.name=="数值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[1]+"：" + data2[0];
                }
              }
            },
            xAxis: {
              show: false, //是否显示 x 轴
              type: 'category',
              //data: ["最小值","最大值"],
              data:xDataArray,
              silent: false,
              splitLine: {
                show: false
              }
            },
            yAxis: {
              show: false,//是否显示 y 轴
              splitLine: {
                show: false
              }
            },
            series: [{
              //name: '死亡人数',
              name: legendArray[0],
              type: 'bar',
              top:'0%',
              left:'0%',
              right:'0%',
              bottom:'0%',
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[0]
              },
              //barWidth: 20,  // 柱形的宽度
              barMaxWidth: 15,  // 柱形的最大宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data1,
              animationDelay: function (idx) {
                return idx * 10;
              }
            }, {
              //name: '受伤人数',
              name: legendArray[1],
              type: 'bar',
              top:0,
              left:0,
              right:0,
              height:0,
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[1]
              },
              //barWidth: 20,  // 柱形的宽度
              barMaxWidth: 15,  // 柱形的最大宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data2,
              animationDelay: function (idx) {
                return idx * 10 + 100;
              }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
              return idx * 5;
            }
          };

          //初始化chart
          this.chart = echarts.init(document.createElement('div'), '', {
            width: 50,
            height: 200
          });
          this.chart.setOption(option);
          //是否显示全部设定地震对应的图表弹出窗口
          if(index==null){//显示选择设定地震对应的图表弹出窗口
            //隐藏全部的评估结果图表弹出框
            if(this.allChartOverLayArray.length>0){
              for(let i=0;i<this.allChartOverLayArray.length;i++){
                if(this.allChartOverLayArray[i]){
                  this.allChartOverLayArray[i].setPosition(undefined);
                }
              }
            }
            //设置chart弹出窗口图层
            this.chartOverLay.setElement(this.chart.getDom());
          }else{//按index显示全部设定地震对应的图表弹出窗口
            //根据index设置图表弹出窗口图层位置
            this.setAllChartOverLayPositionByIndex(index);
            //根据index设置图表弹出窗口图层内容
            if(this.allChartOverLayArray[index]){
              this.allChartOverLayArray[index].setElement(this.chart.getDom());
            }
          }
        }
      }
    },
    //添加echarts柱状图--未选择角度，2个柱体；选择角度，1个柱体
    addEcharts2 (selectType,legendArray,dataArray,index,sort) {
      //移除echarts
      this.removeEcharts(index);
      if(legendArray!=null && legendArray.length==1
          && dataArray!=null && (dataArray.length==2 || dataArray.length==1)){
        //颜色样式
        let colorArray = ["red"];
        let markerStr1 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[0]+";\"></span>";

        let xDataArray = [];
        if(dataArray.length==2){
          if(dataArray[0]==dataArray[1]){//最小值和最大值数值相同
            xDataArray = ['数值'];
            dataArray = [dataArray[0]];
          }else{
            xDataArray = ["最小值","最大值"];
          }
        }else if(dataArray.length==1){
          xDataArray = ['数值'];
        }
        if(xDataArray.length>0){
          let option = {
            legend: {
              show: false,//是否显示图例
              //data: ["经济损失（亿元）"],
              data:legendArray,
              align: 'left'
            },
            gird: {
              show:false,
              left: 0,
              right: 0,
              bottom: 0,
              top: 0,
              containLabel: false
            },
            tooltip: {
              formatter(params){
                if(params.name=="最小值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + dataArray[0];
                }else if(params.name=="最大值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + dataArray[1];
                }else if(params.name=="数值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +markerStr1+legendArray[0]+"：" + dataArray[0];
                }
              }
            },
            xAxis: {
              show: false, //是否显示 x 轴
              type: 'category',
              //data: ["最小值","最大值"],
              data:xDataArray,
              silent: false,
              splitLine: {
                show: false
              }
            },
            yAxis: {
              show: false,//是否显示 y 轴
              splitLine: {
                show: false
              }
            },
            series: [{
              //name: '经济损失（亿元）',
              name: legendArray[0],
              type: 'bar',
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: 'red'
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: dataArray,
              animationDelay: function (idx) {
                return idx * 10;
              }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
              return idx * 5;
            }
          };

          //初始化chart
          this.chart = echarts.init(document.createElement('div'), '', {
            width: 50,
            height: 200
          });
          this.chart.setOption(option);
          //是否显示全部设定地震对应的图表弹出窗口
          if(index==null){//显示选择设定地震对应的图表弹出窗口
            //隐藏全部的评估结果图表弹出框
            if(this.allChartOverLayArray.length>0){
              for(let i=0;i<this.allChartOverLayArray.length;i++){
                if(this.allChartOverLayArray[i]){
                  this.allChartOverLayArray[i].setPosition(undefined);
                }
              }
            }
            //设置chart弹出窗口图层
            this.chartOverLay.setElement(this.chart.getDom());
          }else{//按index显示全部设定地震对应的图表弹出窗口
            //根据index设置图表弹出窗口图层位置
            this.setAllChartOverLayPositionByIndex(index);
            //根据index设置图表弹出窗口图层内容
            if(this.allChartOverLayArray[index]){
              this.allChartOverLayArray[index].setElement(this.chart.getDom());
            }
          }
        }
      }
    },
    //添加echarts柱状图堆叠图（3类）--未选择角度，2个柱体；选择角度，1个柱体
    addEcharts3 (selectType,legendArray,dataArray,index,sort) {
      //移除echarts
      this.removeEcharts(index);
      if(legendArray!=null && legendArray.length==4
          && dataArray!=null && (dataArray.length==6 || dataArray.length==3)){
        //颜色样式
        let colorArray = ["red","blue","orange"];
        let markerStr1 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[0]+";\"></span>";
        let markerStr2 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[1]+";\"></span>";
        let markerStr3 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[2]+";\"></span>";

        let xDataArray = [];
        let data1 = [];
        let data2 = [];
        let data3 = [];
        if(dataArray.length==6){
          if(dataArray[0]==dataArray[1] && dataArray[2]==dataArray[3] && dataArray[4]==dataArray[5]){//最小值和最大值数值相同
            xDataArray = ['数值'];
            data1 = [dataArray[0]];
            data2 = [dataArray[2]];
            data3 = [dataArray[4]];
          }else{
            xDataArray = ["最小值","最大值"];
            data1 = [dataArray[0],dataArray[1]];
            data2 = [dataArray[2],dataArray[3]];
            data3 = [dataArray[4],dataArray[5]];
          }
        }else if(dataArray.length==3){
          xDataArray = ['数值'];
          data1 = [dataArray[0]];
          data2 = [dataArray[1]];
          data3 = [dataArray[2]];
        }
        if(xDataArray.length>0){
          let option = {
            legend: {
              show: false,//是否显示图例
              //data: ["需病房（平方米）","需病床（张）","需血浆（升）"],
              data:[legendArray[1],legendArray[2],legendArray[3]],
              align: 'left'
            },
            gird: {
              show:false,
              left: 0,
              right: 0,
              bottom: 0,
              top: 0,
              containLabel: false
            },
            tooltip: {
              formatter(params){
                if(params.name=="最小值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[0] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[0] + "<br/>";
                }else if(params.name=="最大值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[1] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[1] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[1] + "<br/>";
                }else if(params.name=="数值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[0] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[0] + "<br/>";
                }
              }
            },
            xAxis: {
              show: false, //是否显示 x 轴
              type: 'category',
              //data: ["最小值","最大值"],
              data:xDataArray,
              silent: false,
              splitLine: {
                show: false
              }
            },
            yAxis: {
              show: false,//是否显示 y 轴
              splitLine: {
                show: false
              }
            },
            series: [{
              //name: '需病房（平方米）',
              name: legendArray[1],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[0]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data1,
              animationDelay: function (idx) {
                return idx * 10;
              }
            },{
              //name: '需病床（张）',
              name: legendArray[2],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[1]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data2,
              animationDelay: function (idx) {
                return idx * 10;
              }
            },{
              //name: '需血浆（升）',
              name: legendArray[3],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[2]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data3,
              animationDelay: function (idx) {
                return idx * 10;
              }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
              return idx * 5;
            }
          };

          //初始化chart
          this.chart = echarts.init(document.createElement('div'), '', {
            width: 50,
            height: 200
          });
          this.chart.setOption(option);
          //是否显示全部设定地震对应的图表弹出窗口
          if(index==null){//显示选择设定地震对应的图表弹出窗口
            //隐藏全部的评估结果图表弹出框
            if(this.allChartOverLayArray.length>0){
              for(let i=0;i<this.allChartOverLayArray.length;i++){
                if(this.allChartOverLayArray[i]){
                  this.allChartOverLayArray[i].setPosition(undefined);
                }
              }
            }
            //设置chart弹出窗口图层
            this.chartOverLay.setElement(this.chart.getDom());
          }else{//按index显示全部设定地震对应的图表弹出窗口
            //根据index设置图表弹出窗口图层位置
            this.setAllChartOverLayPositionByIndex(index);
            //根据index设置图表弹出窗口图层内容
            if(this.allChartOverLayArray[index]){
              this.allChartOverLayArray[index].setElement(this.chart.getDom());
            }
          }
        }
      }
    },
    //添加echarts柱状图堆叠图（4类）--未选择角度，2个柱体；选择角度，1个柱体
    addEcharts4 (selectType,legendArray,dataArray,index,sort) {
      //移除echarts
      this.removeEcharts(index);
      if(legendArray!=null && legendArray.length==4
          && dataArray!=null && (dataArray.length==8 || dataArray.length==4)){
        //颜色样式
        let colorArray = ["red","blue","orange"];
        let markerStr1 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[0]+";\"></span>";
        let markerStr2 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[1]+";\"></span>";
        let markerStr3 = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+colorArray[2]+";\"></span>";

        let xDataArray = [];
        let data0 = [];//总数
        let data1 = [];
        let data2 = [];
        let data3 = [];
        if(dataArray.length==8){
          if(dataArray[0]==dataArray[1] && dataArray[2]==dataArray[3] && dataArray[4]==dataArray[5] && dataArray[6]==dataArray[7]){//最小值和最大值数值相同
            xDataArray = ['数值'];
            data0 = [dataArray[0]];
            data1 = [dataArray[2]];
            data2 = [dataArray[4]];
            data3 = [dataArray[6]];
          }else{
            xDataArray = ["最小值","最大值"];
            data0 = [dataArray[0],dataArray[1]];//总数
            data1 = [dataArray[2],dataArray[3]];
            data2 = [dataArray[4],dataArray[5]];
            data3 = [dataArray[6],dataArray[7]];
          }
        }else if(dataArray.length==4){
          xDataArray = ['数值'];
          data0 = [dataArray[0]];//总数
          data1 = [dataArray[1]];
          data2 = [dataArray[2]];
          data3 = [dataArray[3]];
        }
        if(xDataArray.length>0){
          let option = {
            legend: {
              show: false,//是否显示图例
              //data: ["专业救援力量（人）","民间救援力量（人）","社会其他救援力量（人）"],
              data:[legendArray[1],legendArray[2],legendArray[3]],
              align: 'left'
            },
            gird: {
              show:false,
              left: 0,
              right: 0,
              bottom: 0,
              top: 0,
              containLabel: false
            },
            tooltip: {
              formatter(params){
                if(params.name=="最小值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：" + data0[0]
                      + "<br/>其中：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[0] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[0] + "<br/>";
                }else if(params.name=="最大值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：" + data0[1]
                      + "<br/>其中：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[1] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[1] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[1] + "<br/>";
                }else if(params.name=="数值") {
                  return "序号" + sort + "：" + selectType + "-" + params.name + "<br/>"
                      +legendArray[0]+"：" + data0[0]
                      + "<br/>其中：<br/>"
                      +markerStr1+legendArray[1]+"：" + data1[0] + "<br/>"
                      +markerStr2+legendArray[2]+"：" + data2[0] + "<br/>"
                      +markerStr3+legendArray[3]+"：" + data3[0] + "<br/>";
                }
              }
            },
            xAxis: {
              show: false, //是否显示 x 轴
              type: 'category',
              //data: ["最小值","最大值"],
              data:xDataArray,
              silent: false,
              splitLine: {
                show: false
              }
            },
            yAxis: {
              show: false,//是否显示 y 轴
              splitLine: {
                show: false
              }
            },
            series: [{
              //name: '需病房（平方米）',
              name: legendArray[1],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[0]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data1,
              animationDelay: function (idx) {
                return idx * 10;
              }
            },{
              //name: '需病床（张）',
              name: legendArray[2],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[1]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data2,
              animationDelay: function (idx) {
                return idx * 10;
              }
            },{
              //name: '需血浆（升）',
              name: legendArray[3],
              type: 'bar',
              stack:legendArray[0],
              label: {   // 图形上的文本标签
                show: false,
                position: 'top', // 相对位置
                rotate: 0,  // 旋转角度
                color: 'black'
              },
              itemStyle: {    // 图形的形状
                color: colorArray[2]
              },
              barWidth: 15,  // 柱形的宽度
              barMinHeight: 5, // 柱形的最小高度
              barGap:0,/*多个并排柱子设置柱子之间的间距*/
              barCategoryGap:0,/*多个并排柱子设置柱子之间的间距*/
              data: data3,
              animationDelay: function (idx) {
                return idx * 10;
              }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
              return idx * 5;
            }
          };

          //初始化chart
          this.chart = echarts.init(document.createElement('div'), '', {
            width: 50,
            height: 200
          });
          this.chart.setOption(option);
          //是否显示全部设定地震对应的图表弹出窗口
          if(index==null){//显示选择设定地震对应的图表弹出窗口
            //隐藏全部的评估结果图表弹出框
            if(this.allChartOverLayArray.length>0){
              for(let i=0;i<this.allChartOverLayArray.length;i++){
                if(this.allChartOverLayArray[i]){
                  this.allChartOverLayArray[i].setPosition(undefined);
                }
              }
            }
            //设置chart弹出窗口图层
            this.chartOverLay.setElement(this.chart.getDom());
          }else{//按index显示全部设定地震对应的图表弹出窗口
            //根据index设置图表弹出窗口图层位置
            this.setAllChartOverLayPositionByIndex(index);
            //根据index设置图表弹出窗口图层内容
            if(this.allChartOverLayArray[index]){
              this.allChartOverLayArray[index].setElement(this.chart.getDom());
            }
          }
        }
      }
    },
    //移除echarts
    removeEcharts (index) {
      if(index==null){
        //全部图表销毁
        for(let i=0;i<this.allChartArray.length;i++){
          if (this.allChartArray[i]) {
            this.allChartArray[i].dispose()
            this.allChartArray[i] = null
          }
        }
        // 图表销毁
        if (this.chart) {
          this.chart.dispose()
          this.chart = null
        }
      }else{
        //全部图表中的第index个图表销毁
        if (this.allChartArray[index]) {
          this.allChartArray[index].dispose()
          this.allChartArray[index] = null
        }
      }
      /*//弹出层销毁
      if (this.chartOverLay) {
        //设置位置undefined可达到隐藏清除弹出框
        this.chartOverLay.setPosition(undefined)
        this.chartOverLay = null
      }*/
    },
    //根据index设置图表弹出窗口图层位置
    setAllChartOverLayPositionByIndex(index){
      if(index!=null && index>=0 && this.allSettingLayer!=null && this.allDataList!=null && this.allDataList.length>index) {
        let list = this.allDataList;
        for (let i = 0; i < list.length; i++) {
          //经纬度
          let longitude = list[index].longitude;
          let latitude = list[index].latitude;
          //处理经纬度
          let lonlat = this.getLonLat(longitude, latitude);
          if (lonlat != null) {
            if(this.allChartOverLayArray[index]){
              this.allChartOverLayArray[index].setPosition(lonlat);
            }
          }
        }
      }
    },
    //根据值和图例样式数组获取颜色
    getColorByLegendArray(legendArray,value){
      let color = "orange";
      for(let i=0;i<legendArray.length;i++){
        let min = legendArray[i][0];
        let max = legendArray[i][1];
        if(value>=min){
          if(max!=null){
            if(value<=max){
              color = legendArray[i][2];
              break;
            }
          }else{
            color = legendArray[i][2];
            break;
          }
        }
      }

      return color;
    },
    //显示抗震能力分布图层查询结果数据列表
    showSeismicCapacityDistributionListData(){
      let list = this.seismicCapacityDistributionListData;
      if(list!=null && list.length>0){
        if(this.seismicCapacityDistributionLayer!=null) {
          //清空图层
          this.seismicCapacityDistributionLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.capacityLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let dataSource = list[i].dataSource;//0:区县级,1:乡镇级,2:公里格网级
            let seismicCapacityValue = list[i].seismicCapacityValue;//建筑物综合抗震能力
            let geomText = this.getTextFormat(list[i].geom);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,seismicCapacityValue);
            //样式
            let style = null;
            if(dataSource=="2"){//2:公里格网级
              style = this.getPolyonFillStyle(backgroundColor);//不带边框
            }else{
              style = this.getPolyonStyle("gray",backgroundColor,2);
            }
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"抗震能力分布图层",value:seismicCapacityValue});
            //添加抗震能力分布图层
            this.seismicCapacityDistributionLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.seismicCapacityDistributionLayer!=null){
          //清空图层
          this.seismicCapacityDistributionLayer.getSource().clear();
        }
      }
    },
    //显示人员死亡分布图（修正前）
    showEvalateDeathDistributionData(){
      let list = this.evaluateResultListData;
      if(list!=null && list.length>0){
        if(this.evaluateResultLayer!=null) {
          //清空图层
          this.evaluateResultLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.evaluateResultLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let deathNum = list[i].deathNum;//死亡人数
            let geomText = this.getTextFormat(list[i].geomText);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,deathNum);
            //样式
            let style = this.getPolyonFillStyle(backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"人员死亡分布图（修正前）",value:deathNum});
            //添加人员死亡分布图（修正前）
            this.evaluateResultLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.evaluateResultLayer!=null){
          //清空图层
          this.evaluateResultLayer.getSource().clear();
        }
      }
    },
    //显示经济损失亡分布图（修正前）
    showEvalateEconomyDistributionData(){
      let list = this.evaluateResultListData;
      if(list!=null && list.length>0){
        if(this.evaluateResultLayer!=null) {
          //清空图层
          this.evaluateResultLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.evaluateResultLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let directLosses = list[i].directLosses;//经济损失（万元）
            let geomText = this.getTextFormat(list[i].geomText);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,directLosses);
            //样式
            let style = this.getPolyonFillStyle(backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"经济损失亡分布图（修正前）",value:directLosses});
            //添加经济损失亡分布图（修正前）
            this.evaluateResultLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.evaluateResultLayer!=null){
          //清空图层
          this.evaluateResultLayer.getSource().clear();
        }
      }
    },
    //显示需紧急安置人数分布图（修正前）
    showEvalateEmergencyDistributionData(){
      let list = this.evaluateResultListData;
      if(list!=null && list.length>0){
        if(this.evaluateResultLayer!=null) {
          //清空图层
          this.evaluateResultLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.evaluateResultLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let plantPerson = list[i].plantPerson;//需紧急安置人数
            let geomText = this.getTextFormat(list[i].geomText);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,plantPerson);
            //样式
            let style = this.getPolyonFillStyle(backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"需紧急安置人数分布图（修正前）",value:plantPerson});
            //添加需紧急安置人数分布图（修正前）
            this.evaluateResultLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.evaluateResultLayer!=null){
          //清空图层
          this.evaluateResultLayer.getSource().clear();
        }
      }
    },
    //显示区县致死性差异性分布查询结果数据列表图层
    showCountyDeathDiffListData(){
      let list = this.countyDeathDiffListData;
      if(list!=null && list.length>0){
        if(this.countyDeathDiffLayer!=null){
          //清空图层
          this.countyDeathDiffLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.countyDeathDiffLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let finalValue = list[i].finalValue;//数值
            let geomText = this.getTextFormat(list[i].geom);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,finalValue);
            //样式
            let style = this.getPolyonStyle("gray",backgroundColor,2);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"区县致死性差异性分布",finalValue:finalValue});
            //添加区县致死性差异性分布图层
            this.countyDeathDiffLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.countyDeathDiffLayer!=null){
          //清空图层
          this.countyDeathDiffLayer.getSource().clear();
        }
      }
    },
    //显示图层类型事件：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
    showLayerTypeEvent(){
      //显示图层类型：基础数据图层|地震影响场|抗震能力分布图层|区县致死性差异性分布|评估结果
      let newVal = this.showLayerTypeData;
      if(newVal!=null){
        if(newVal===""){
          //隐藏基础数据图层
          /*if(this.showBaseDataLayerDataBool){
            this.showBaseDataLayerDataBool = false;
            //隐藏基础数据图层控件
            this.$emit("showBaseDataLayerControl",false);
          }*/

          //隐藏地震影响场
          if(this.showEllipseLayerDataBool){
            this.showEllipseLayerDataBool = false;
            if(this.ellipseLayer!=null) {
              this.ellipseLayer.getSource().clear();//清空地震影响场
            }
            this.$emit("showInfluenceEvent",null);
          }

          //隐藏抗震能力分布图层
          if(this.showSeismicCapacityDistributionLayerDataBool){
            this.showSeismicCapacityDistributionLayerDataBool = false;
            if(this.seismicCapacityDistributionLayer!=null) {
              this.seismicCapacityDistributionLayer.getSource().clear();//清空抗震能力分布图层
            }
            this.$emit("showSeismicCapacityDistributionLayer",false);
          }

          //隐藏区县致死性差异性分布
          if(this.showCountyDeathDiffLayerDataBool){
            this.showCountyDeathDiffLayerDataBool = false;
            if(this.countyDeathDiffLayer!=null) {
              this.countyDeathDiffLayer.getSource().clear();//清空区县致死性差异性分布图层
            }
            this.$emit("showCountyDeathDiff",false);
          }

          //隐藏评估结果
          if(this.showEvaluateResultSelectDivBool){
            //隐藏评估结果选择面板
            this.showEvaluateResultSelectDivBool = false;
            this.$emit("showEvaluateResultSelect",false);
          }
        }else{
          //隐藏基础数据图层
          /*if(newVal!="基础数据图层" && this.showBaseDataLayerDataBool){
            this.showBaseDataLayerDataBool = false;
            //隐藏基础数据图层控件
            this.$emit("showBaseDataLayerControl",false);
          }*/

          //隐藏地震影响场
          if(newVal!="地震影响场" && this.showEllipseLayerDataBool){
            this.showEllipseLayerDataBool = false;
            if(this.ellipseLayer!=null) {
              this.ellipseLayer.getSource().clear();//清空地震影响场
            }
            this.$emit("showInfluenceEvent",null);
          }

          //隐藏抗震能力分布图层
          if(newVal!="抗震能力分布图层" && this.showSeismicCapacityDistributionLayerDataBool){
            this.showSeismicCapacityDistributionLayerDataBool = false;
            if(this.seismicCapacityDistributionLayer!=null) {
              this.seismicCapacityDistributionLayer.getSource().clear();//清空抗震能力分布图层
            }
            this.$emit("showSeismicCapacityDistributionLayer",false);
          }

          //隐藏区县致死性差异性分布
          if(newVal!="区县致死性差异性分布" && this.showCountyDeathDiffLayerDataBool){
            this.showCountyDeathDiffLayerDataBool = false;
            if(this.countyDeathDiffLayer!=null) {
              this.countyDeathDiffLayer.getSource().clear();//清空区县致死性差异性分布图层
            }
            this.$emit("showCountyDeathDiff",false);
          }

          //隐藏评估结果
          if(newVal!="评估结果" && this.showEvaluateResultSelectDivBool){
            //隐藏评估结果选择面板
            this.showEvaluateResultSelectDivBool = false;
            this.$emit("showEvaluateResultSelect",false);
          }
        }

        if(newVal===""){
          //
        }else if(newVal=="基础数据图层"){
          /*this.showBaseDataLayerDataBool = true;//显示基础数据图层
          //显示基础数据图层控件
          this.$emit("showBaseDataLayerControl",true);*/
        }else if(newVal=="地震影响场"){
          this.showEllipseLayerDataBool = true;//显示地震影响场
          let list = this.allDataList;
          if(list!=null && list.length>0){
            //默认显示第一个地震影响场
            let num = list[0].sort;//序号
            //经纬度
            let longitude = list[0].longitude;
            let latitude = list[0].latitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude);
            if(lonlat!=null){
              let temp = {num: num,lon:longitude,lat:latitude};
              this.$emit("showInfluenceEvent",temp);
            }
          }else{//导入影响场
            this.$emit("showInfluenceEvent",{num: null,lon:null,lat:null});
          }
        }else if(newVal=="抗震能力分布图层"){
          this.showSeismicCapacityDistributionLayerDataBool = true;//显示抗震能力分布图层
          this.$emit("showSeismicCapacityDistributionLayer",true);
        }else if(newVal=="区县致死性差异性分布"){
          this.showCountyDeathDiffLayerDataBool = true;//显示区县致死性差异性分布
          this.$emit("showCountyDeathDiff",true);
        }else if(newVal=="评估结果"){
          this.showEvaluateResultSelectDivBool = true;//显示评估结果
          this.$emit("showEvaluateResultSelect",true);
        }

        if(this.popupInfoLayer){
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
        }
      }
    },
    //获取图例数组
    getLegendArrayByData(legendSelectData){
      //图例设置样式
      let legendArray = [];
      if(legendSelectData!=null && legendSelectData.length>0){
        for(let i=0;i<legendSelectData.length;i++){
          let legendName = legendSelectData[i].name;
          let legendColor = legendSelectData[i].color;
          if(legendName.indexOf("以上")==-1){
            if(legendName.indexOf("-")==-1){//单个值
              let minLegend = Number(legendName);
              let maxLegend = minLegend;
              legendArray.push([minLegend,maxLegend,legendColor]);
            }else{//2个值
              let legendArr = legendName.split("-");
              let minLegend = Number(legendArr[0]);
              let maxLegend = Number(legendArr[1]);
              legendArray.push([minLegend,maxLegend,legendColor]);
            }
          }else{
            let minLegend = Number(legendName.split("以上")[0]);
            let maxLegend = null;
            legendArray.push([minLegend,maxLegend,legendColor]);
          }
        }
      }

      return legendArray;
    },
    //显示震后交通情况分布图
    showCountyLandslideListData(){
      let allList = this.countyLandslideListData;
      if(allList!=null && allList.length==2){
        if(this.evaluateResultLayer!=null){
          //清空图层
          this.evaluateResultLayer.getSource().clear();
          let list = allList[0];
          let list1 = allList[1];
          console.log(list1);
          //显示震后影响交通数据
          this.showResultRoadListData(list);
          //显示地震滑坡网格
          this.showYpgResultSlopeListData(list1);
        }
      }else{
        if(this.evaluateResultLayer!=null){
          //清空图层
          this.evaluateResultLayer.getSource().clear();
          //是否已有图层并移除图层
          this.removeLayerBool("震后交通情况分布图_分级矢量图层");
          this.removeLayerBool("震后交通情况分布图_缓冲区4级图层");
          this.removeLayerBool("震后交通情况分布图_缓冲区5级图层");
        }
      }
    },
    //显示震后影响交通数据
    showResultRoadListData(list){
      if(list!=null && list.length>0 && this.evaluateResultLayer!=null){
        // let allCoordinates = [];//全部经纬度
        for(let i=0;i<list.length;i++){
          if(list[i]==null){
            continue;
          }
          let id = list[i].id;//主键ID
          let name = list[i].roadName;//名称
          //console.log(name);
          let geomText = this.getTextFormat(list[i].geomText);
          //空间数据--线
          let featureTmp = new WKT().readFeature(geomText);
          //样式
          let style = this.getLineStringStyle("red",name,true);
          // featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({id: id,dataType:"震后交通情况分布图",name:name});
          //添加震后交通情况分布图
          this.evaluateResultLayer.getSource().addFeature(featureTmp);
          /*//获取范围
          let extent = featureTmp.getGeometry().getExtent();
          if(extent.length==4){
            //全部经纬度--左下角
            allCoordinates.push([extent[0],extent[1]]);
            //全部经纬度--右上角
            allCoordinates.push([extent[2],extent[3]]);
          }*/
        }
        //缩放到区域位置
        // this.showBoundingExtent(allCoordinates);
      }
    },
    //显示地震滑坡网格
    showYpgResultSlopeListData(list){
      /*this.dzIntensity = null;//烈度
      this.roadRange = null;//对道路影响的范围(m)
      if(list!=null && list.length>0){
        if(this.evaluateResultLayer!=null) {
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          let allCoordinates = [];//全部经纬度
          this.dzIntensity = list[0].dzIntensity;//烈度
          this.roadRange = list[0].roadRange;//对道路影响的范围(m)
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let id = list[i].id;//主键ID
            let resultLevel = list[i].resultLevel;//地震滑坡密度的等级
            let geomText = this.getTextFormat(list[i].geom);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = "green";
            let legendData = this.countyLandslideLegendData;
            for(let j=0;j<legendData.length;j++){
              if(resultLevel==legendData[j].name){
                backgroundColor = legendData[j].color;
                break;
              }
            }
            //样式
            // let style = this.getPolyonStyle(backgroundColor,backgroundColor,2);
            let style = this.getPolyonFillStyle(backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"地震滑坡网格",value:resultLevel});
            //添加地震滑坡缓冲区
            this.evaluateResultLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }*/
      let that = this;
      this.dzIntensity = null;//烈度
      this.roadRange = null;//对道路影响的范围(m)
      if(list!=null && list.length>0) {
        if (this.evaluateResultLayer != null) {
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          this.dzIntensity = list[0].dzIntensity;//烈度
          this.roadRange = list[0].roadRange;//对道路影响的范围(m)
          for(let i=0;i<list.length;i++){
            let layerType = list[i].extends1;//图层数据类型：最终计算、分级矢量化、缓冲区4级、缓冲区5级
            if(layerType=="分级矢量化"){
              let layerName = list[i].filePath;
              let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
              //添加超图临时图层
              getSqlTempLayer(url,null,true).then((layer) => {
                layer.set('id', "震后交通情况分布图_分级矢量图层");
                layer.setZIndex(6);
                that.map.addLayer(layer);
              });
              break;
            }
          }
        }
      }else{
        //是否已有图层并移除图层
        this.removeLayerBool("震后交通情况分布图_分级矢量图层");
      }
    },
    //显示滑坡缓冲区图层
    showCountyLandslideBufferList(){
      /*let that = this;
      let list = this.countyLandslideBufferList;
      if(list!=null && list.length>0){
        if(this.landslideBufferLayer!=null) {
          //清空图层
          this.landslideBufferLayer.getSource().clear();
          //隐藏弹出窗口
          this.popupInfoLayer.setPosition(undefined);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            if(list[i]==null){
              continue;
            }
            let resultLevel = list[i].resultLevel;//地震滑坡密度的等级
            let geomText = this.getTextFormat(list[i].geom);
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = "red";
            let legendData = this.countyLandslideLegendData;
            for(let j=0;j<legendData.length;j++){
              if(resultLevel==legendData[j].name){
                backgroundColor = legendData[j].color;
                break;
              }
            }
            //样式
            let style = this.getPolyonStyle("gray",backgroundColor,2);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({dataType:"地震滑坡缓冲区",value:resultLevel});
            //添加地震滑坡缓冲区
            this.landslideBufferLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.landslideBufferLayer!=null) {
          //清空图层
          this.landslideBufferLayer.getSource().clear();
        }
      }*/

      let that = this;
      let list = this.countyLandslideBufferList;
      if(list!=null && list.length>0){
        for(let i=0;i<list.length;i++){
          let layerType = list[i].extends1;//图层数据类型：最终计算、分级矢量化、缓冲区4级、缓冲区5级
          if(layerType=="缓冲区4级"){
            let layerName = list[i].filePath;
            let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
            //添加超图临时图层
            getSqlTempLayer(url,null,true).then((layer) => {
              layer.set('id', "震后交通情况分布图_缓冲区4级图层");
              layer.setZIndex(6);
              that.map.addLayer(layer);
            });
          }else if(layerType=="缓冲区5级"){
            let layerName = list[i].filePath;
            let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
            //添加超图临时图层
            getSqlTempLayer(url,null,true).then((layer) => {
              layer.set('id', "震后交通情况分布图_缓冲区5级图层");
              layer.setZIndex(6);
              that.map.addLayer(layer);
            });
          }
        }
      }else{
        this.removeLayerBool("震后交通情况分布图_缓冲区4级图层");
        this.removeLayerBool("震后交通情况分布图_缓冲区5级图层");
      }
    },
    //是否已有图层并移除图层
    removeLayerBool(layerId) {
      let bool = false;
      if (this.map!=null){
        let layers = this.map.getLayers();
        layers.forEach((layer) => {
          if(layer){
            let lid = layer.get('id');
            if (lid) {
              if (lid.indexOf(layerId) != -1) {
                bool = true;
                this.map.removeLayer(layer);
              }
            }
          }
        });
      }

      return bool;
    },
    //是否已有图层
    isLayerBool(layerId) {
      let bool = false;
      let layers = this.map.getLayers();
      layers.forEach((layer) => {
        if(layer){
          let lid = layer.get('id');
          if (lid) {
            if (lid.indexOf(layerId) != -1) {
              bool = true;
            }
          }
        }
      });
      return bool;
    },
    //根据经纬度查询所有显示图层要素信息
    queryShowLayerFeatureByLonLat(lonlat){
      let that = this;
      if(lonlat!=null && lonlat.length==2){
        let bool = this.judgeLonLatInPolygon(lonlat);//判断经纬度是否在任务区域内
        if(bool==false) {
          return;
        }
        // this.$emit("mapLoading","正在查询...");
        let zoom = this.map.getView().getZoom();
        // let layers = this.map.getLayers();
        let array = [];
        //震后交通情况分布图
        let allList = this.countyLandslideListData;
        if(allList!=null && allList.length==2){
          let list = allList[1];
          if(list!=null && list.length>0) {
            for (let i = 0; i < list.length; i++) {
              let layerName = list[i].filePath;
              let layerType = list[i].extends1;//图层数据类型：最终计算、分级矢量化、缓冲区4级、缓冲区5级
              if (layerType == "分级矢量化") {
                let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
                let obj = {database:"ypgTifCount", name: '震后交通情况分布图_分级矢量图层', code: '震后交通情况分布图_分级矢量图层', table:layerName,url:url,zIndex:6,fieldId:"SMID",sqlFilter:"",fields:["SMID","GRIDVALUE"]};
                array.push(obj);
              }else if (layerType == "缓冲区4级") {
                let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
                let obj = {database:"ypgTifCount", name: '震后交通情况分布图_缓冲区4级图层', code: '震后交通情况分布图_缓冲区4级图层', table:layerName,url:url,zIndex:6,fieldId:"SMID",sqlFilter:"",fields:["SMID","GRIDVALUE"]};
                array.push(obj);
              }else if (layerType == "缓冲区5级") {
                let url = "/iserver/services/map-ypgTifCount/rest/maps/" + layerName;
                let obj = {database:"ypgTifCount", name: '震后交通情况分布图_缓冲区5级图层', code: '震后交通情况分布图_缓冲区5级图层', table:layerName,url:url,zIndex:6,fieldId:"SMID",sqlFilter:"",fields:["SMID","GRIDVALUE"]};
                array.push(obj);
              }
            }
          }
        }
        let totalLength = array.length;
        let count = 0;
        let resultDataTypeInfo = null;//已查询到图层要素结果的数据类型信息
        let resultDataId = null;//已查询到的图层要素主键ID
        let resultDataFeature = null;//已查询到的图层要素数据
        let proms = [];
        if(totalLength>0){
          this.$emit("mapLoading","正在查询...");
          for(let i=0;i<totalLength;i++){
            let dataTypeInfo = array[i];
            let databaseName = dataTypeInfo.database;
            let tableName = dataTypeInfo.table;
            let sqlFilter = dataTypeInfo.sqlFilter;//未删除的sql过滤条件
            let layerId = dataTypeInfo.code;
            let fields = dataTypeInfo.fields;//属性字段只包含所指定的字段
            if(this.isLayerBool(layerId)){
              const prom = queryFeatureByLonLat(databaseName, tableName, lonlat, dataTypeInfo, sqlFilter, zoom, fields);
              proms.push(prom);
              console.log(i+","+count+","+prom[1]);
              count++;
            }else{
              console.log(i+","+count+","+null);
              count++;
              this.completeQueryShowLayerFeatureByLonLat(lonlat,totalLength,count,resultDataTypeInfo,resultDataId,resultDataFeature);
            }
          }
          Promise.all(proms).then((res) => {
            let allResultArray = [];
            res.forEach((item, index) => {
              allResultArray.push(item);
            });
            Promise.all(allResultArray).then((result) => {
              result.forEach((item, index) => {
                let resultArray = item;
                console.log("resultArray");
                console.log(resultArray);
                if(resultArray[1] && resultArray[2]){
                  let dataTypeInfo = resultArray[0];
                  let id = resultArray[1];
                  let feature = resultArray[2];
                  if(resultDataTypeInfo){//已查询到图层要素结果的数据类型信息
                    if(resultDataTypeInfo.zIndex < dataTypeInfo.zIndex){//图层顺序大的优先查询
                      resultDataTypeInfo = dataTypeInfo;
                      resultDataId = id;
                      resultDataFeature = feature;
                    }
                  }else{
                    resultDataTypeInfo = dataTypeInfo;
                    resultDataId = id;
                    resultDataFeature = feature;
                  }
                }
              });
              that.completeQueryShowLayerFeatureByLonLat(lonlat,totalLength,count,resultDataTypeInfo,resultDataId,resultDataFeature);
            });
          });
        }
      }
    },
    //完成根据经纬度查询所有显示图层要素信息
    completeQueryShowLayerFeatureByLonLat(lonlat,totalLength,count,resultDataTypeInfo,resultDataId,resultDataFeature){
      console.log("count--"+count+",totalLength---"+totalLength);
      if(count==totalLength){
        if(resultDataId){
          let datatype = resultDataTypeInfo.name;
          console.log("complete--"+resultDataId+","+datatype);
          console.log("resultDataFeature");
          console.log(resultDataFeature);
          // showDetailId([resultDataId,datatype]);
          let temp = null;
          if(datatype=="震后交通情况分布图_分级矢量图层"){
            let gridValue = resultDataFeature.properties["GRIDVALUE"];
            if(gridValue==1){
              gridValue = "一级：极低危险";
            }else if(gridValue==2){
              gridValue = "二级：低危险";
            }else if(gridValue==3){
              gridValue = "三级：中危险";
            }else if(gridValue==4){
              gridValue = "四级：高危险";
            }else if(gridValue==5){
              gridValue = "五级：极高危险";
            }
            temp = {dataType:"地震滑坡网格",value:gridValue};
          }else if(datatype=="震后交通情况分布图_缓冲区4级图层"){
            temp = {dataType:"地震滑坡缓冲区",value:"四级：高危险"};
          }else if(datatype=="震后交通情况分布图_缓冲区5级图层"){
            temp = {dataType:"地震滑坡缓冲区",value:"五级：极高危险"};
          }
          if(temp!=null){
            //设置弹窗内容
            this.setPopupContent(temp);
            this.popupInfoLayer.setPosition(lonlat);
          }
        }
        this.$emit("mapLoading",null);
      }
    },
  }
}

</script>

<style scoped>

</style>